<template>
    <el-button size="large" link @click="showform()" :disabled="formdatabase.isreadonly">
        <el-icon><Link /></el-icon>
    </el-button>
    <el-dialog v-model="dialogVisible" :title="$t('选择菜单')" width="400" draggable>
        <el-input v-model="filterText" :suffix-icon="Search" :placeholder="$t('请输入')">
            <template #append>
                <el-dropdown>
                    <span>
                        <el-icon><MoreFilled /></el-icon>
                    </span>
                    <template #dropdown>
                        <el-dropdown-menu>
                            <el-dropdown-item @click="expandAll">{{ $t('展开') }}</el-dropdown-item>
                            <el-dropdown-item @click="collapseAll">{{ $t('收缩') }}</el-dropdown-item>
                        </el-dropdown-menu>
                    </template>
                </el-dropdown>
            </template>
        </el-input>
        <el-divider style="margin: 5px" />
        <!-- prettier-ignore -->
        <el-tree style="max-width: 400px" 
        ref="treeRef" 
        :data="treedata" 
        :props="defaultProps" 
        default-expand-all 
        :expand-on-click-node="false" 
        :filter-node-method="filterNode" 
        highlight-current >
            <template #default="{ node, data }">
                <span @dblclick="dbSetCurrent(data)">
                    <div v-if="node.isCurrent">
                        <span style="color: blue">{{ $t(node.label) }}</span>
                        <el-button link @click="dbSetCurrent(data)" style="color: green;  font-size:15px; margin-left: 30px"> {{ $t('选择') }} </el-button>
                    </div>
                    <div v-else>
                        <span>{{ $t(node.label) }}</span>
                    </div>
                </span>
            </template>
        </el-tree>
    </el-dialog>
</template>
<script lang="ts" setup>
import { ref, watch } from 'vue';
import { useI18n } from 'vue-i18n';
import { Search } from '@element-plus/icons-vue';
import Menu from '@/assets/menu.json';
 
const defaultProps = {
    children: 'children',
    label: 'name',
};
//树节点设置
const filterText = ref('');
const treeRef = ref<InstanceType<typeof ElTree>>();
//输入栏过滤
watch(filterText, (val) => {
    treeRef.value!.filter(val);
});

const { t } = useI18n(); //多语言
//是否显示弹窗组件
const dialogVisible = ref(false);
interface FormDatabaseProps {
    isreadonly?: boolean;
}
const formdatabase = withDefaults(defineProps<FormDatabaseProps>(), {
    isreadonly: false,
});
const treedata: any = ref([]); //表格数据
// 过滤掉带有 visible: false 的节点
function filterTree(data) {
  return data.reduce((acc, node) => {
    if (node.visible) {
      let newNode = { ...node };
      if (newNode.children) {
        newNode.children = filterTree(newNode.children);
      }
      acc.push(newNode);
    }
    return acc;
  }, []);
}

//显示弹窗
const showform = () => {
    treedata.value = filterTree(Menu);
    dialogVisible.value = true;
};

// 定义 emits 的事件
const emit = defineEmits<{
    (event: 'updatedata', dept: any): void;
}>();
//双击选则
const dbSetCurrent = (e) => {
    emit('updatedata', e);
    dialogVisible.value = false;
};

// 一键展开
const expandAll = async () => {
    Object.values(treeRef.value.store.nodesMap).forEach((v: any) => v.expand());
};

// 一键收缩
const collapseAll = () => {
    Object.values(treeRef.value.store.nodesMap).forEach((v: any) => v.collapse());
};
//输入栏过滤
const filterNode = (value: string, data: any) => {
    if (!value) return true;
    return data.name.includes(value);
};

const I = (label, labeleng) => {
    if (labeleng && localStorage.getItem('locale') == 'en') {
        return labeleng;
    }
    return t(label);
};
</script>
<style scoped></style>
